<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm
        ref="filterForm"
        :elements="elements"
        noimmediate
        @submit="handleSearch"
        @reset="handleReset"
      >
        <Button type="plain" @click="handleJxss">绩效申诉</Button>
      </FilterForm>
    </Container>
    <Container height="fill">
      <div class="wraper">
        <Table
          :columns="tableColumns"
          :loading="tableLoading"
          :data="tableData"
          :pagination="{
            total: total,
            current: currentPage,
            pageSize: pageSize,
          }"
          @paginationChange="pageChange"
        >
          <template #caozuo="scope">
            <Tooltip content="查看" icon="icon-chakan" @click="handleDataItem(scope.row)" />
            <!-- <Tooltip content="编辑" icon="el-icon-edit-outline" @click="handlerEdit(scope.row)" /> -->
            <Tooltip v-if="scope.row.status === 0" content="撤回" icon="icon-chehui" @click="handlerDelete(scope.row)" />
          </template>
        </Table>
      </div>
      <!-- 新增、编辑 -->
      <Drawer
        ref="drawerRef"
        :title="title"
        :visible.sync="showDrawer"
        width="20%"
        :footer-btns="[
          {
            text: '确认',
            type: 'primary',
            loading: qrLoading,
            trigger: 'submit',
          },
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel',
          }
        ]"
        @submit="handleSubmit"
        @cancel="showDrawer = false"
      >
        <el-form
          v-if="showDrawer"
          ref="drawerForm"
          :model="drawerForm"
          :rules="drawerRules"
          label-width="100px"
          size="mini"
          class="demo-drawerForm"
        >
          <el-form-item label="申诉周期" prop="appealCycle">
            <el-select v-model="drawerForm.appealCycle" clearable placeholder="请选择申诉周期">
              <el-option
                v-for="item in this.elements[0].options"
                :key="item.id"
                :value="item.id"
                :label="item.periodPull"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input 
              v-model="drawerForm.remark"
              type="textarea"
              placeholder="请输入"
              rows="5"
              maxlength="100"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-form>
      </Drawer>
      <!-- 查看 -->
      <Drawer
        :title="title"
        :visible.sync="showDetail"
        width="20%"
        :footer-btns="[
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel',
          }
        ]"
        @cancel="showDetail = false"
      >
        <el-form :inline='false' ref="itemForm" :model="itemForm" label-width="100px" label-position="right">
          <div style="height: 300px;border-bottom: 1px solid #eee;">
            <el-form-item label="申诉周期：">
              <span>{{ itemForm.periodPull }}</span>
            </el-form-item>
            <el-form-item label="备注：">
              <span>{{ itemForm.appealContent }}</span>
            </el-form-item>
          </div>
          <div style="margin-top: 10px;">
            <el-form-item label="审核人：">
              <span>{{ itemForm.appealName }}</span>
            </el-form-item>
            <el-form-item label="状态：">
              <span>{{ itemForm.statusName }}</span>
            </el-form-item>
            <el-form-item label="审核意见：">
              <span>{{ itemForm.auditingContent }}</span>
            </el-form-item>
          </div>
        </el-form>
      </Drawer>
    </Container>
  </ContainerGroup>
</template>

<script>
import {
  getAssessmentCyclePull,
  listByPage,
  saveOrUpdate,
  removeById
} from '@/api/weight'
import {
  HISDeptCode
} from '@/api/targetManagement'
export default {
  data() {
    return {
      elements: [
        {
          key: 'cycle',
          label: '周期',
          type: 'select',
          itemLabel: 'periodPull',
          itemValue: 'id',
          hideSelectAll: true,
          options: [],
          value: ''
        },
        {
          key: 'itemDate',
          label: '时间',
          type: 'datePicker',
          format: 'yyyy-MM-dd',
          value: ''
        },
        {
          key: 'status',
          label: '状态',
          type: 'select',
          itemLabel: 'label',
          itemValue: 'value',
          hideSelectAll: true,
          options: [
            {
              label: '待审核',
              value: 0
            },
            {
              label: '驳回',
              value: 2
            },
            {
              label: '已核对',
              value: 1
            }
          ],
          value: ''
        }
      ],
      tableColumns: [
        {
          title: '申诉周期',
          dataIndex: 'periodPull'
        },
        {
          title: '备注',
          dataIndex: 'appealContent'
        },
        {
          title: '状态',
          dataIndex: 'statusName',
        },
        {
          title: '申诉时间',
          dataIndex: 'appealTime'
        },
        {
          title: '操作',
          dataIndex: 'caozuo',
          type: 'otherTag'
        }
      ],
      tableData: [],
      tableLoading: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      newCondition: {},
      title: '',
      showDrawer: false,
      qrLoading: false,
      drawerForm: {
        appealCycle: '',
        remark: ''
      },
      drawerRules: {
        appealCycle: [{ required: true, message: '请选择申诉周期', trigger: 'change' }]
      },
      showDetail: false,
      itemForm: {}
    }
  },
  created() {
    this.getSelect()
  },
  methods: {
    getSelect() {
      // 周期
      getAssessmentCyclePull().then((res) => {
        if (res.code === 200) {
          this.elements[0].options = res.data
          const { id } = res.data[0]
          this.elements[0].value = id
          localStorage.setItem(
            'cycle',
            JSON.stringify(this.elements[0].options)
          )
          this.handleSearch(this.$refs.filterForm.getParms())
        } else {
          this.$message.error(res.msg)
        }
      })
      HISDeptCode().then(res => {
        if (res.code === 200) {
          this.elements[3].options = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 重置
    handleReset() {
      this.handleSearch()
    },
    // 查询
    handleSearch(val) {
      this.newCondition = val
      this.currentPage = 1
      this.getData()
    },
    // 分页
    pageChange(payload) {
      this.currentPage = payload.current
      this.pageSize = payload.pageSize
      this.getData()
    },
    // 数据
    getData() {
      const param = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        assessmentCycleId: this.newCondition?.cycle,
        appealTime: this.newCondition?.itemDate,
        status: this.newCondition?.status
      }
      this.tableLoading = true
      listByPage(param).then(res => {
        this.tableLoading = false
        if (res.code === 200) {
          this.tableData = res.data.records
          this.total = res.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 绩效申诉
    handleJxss() {
      this.title = '绩效申诉'
      this.drawerForm.appealCycle = ''
      this.drawerForm.remark = ''
      this.showDrawer = true
    },
    // 查看
    handleDataItem(row) {
      this.itemForm = row
      this.title = '查看详情'
      this.showDetail = true
    },
    // 编辑
    // handlerEdit(row) {
    //   this.title = '绩效申诉'
    //   this.$handleSetForm(this.drawerForm, 0);
    //   this.showDrawer = true
    // },
    // 新增、编辑--保存
    handleSubmit() {
      this.$refs["drawerForm"].validate((valid) => {
        if (valid) {
          const param = {
            assessmentCycleId: this.drawerForm.appealCycle,
            appealContent: this.drawerForm.remark,
            appealCode: JSON.parse(localStorage.userInfo).userCode,
            appealName: JSON.parse(localStorage.userInfo).userName
          };
          // param.id = this.currentRow?.id;
          this.qrLoading = true;
          saveOrUpdate(param).then((res) => {
            this.qrLoading = false;
            if (res.code === 200) {
              this.getData();
              this.showDrawer = false
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          console.log("error submit!!!")
          return false
        }
      })
    },
    // 撤回
    handlerDelete(row) {
      this.$ckConfirm({
        content: '是否撤回此次申诉?',
        title: '提示',
        okFn: (res) => {
          removeById({
            id: row.id
          }).then((res) => {
            if (res.code === 200) {
              this.currentPage = 1
              this.getData()
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        },
        cancelFn: (res) => {
          console.log('取消')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wraper {
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
  .upload-demo {
    .buttons {
      margin: 0px 5px;
      height: 27px;
      margin-top: -1px;
    }
  }
}
/deep/.el-dialog-header {
  padding: 10px 10px 0px 10px;
  padding-bottom: 0px;
}
/deep/.el-dialog-title {
  font-size: 15px;
}
/deep/.el-dialog-headerbtn {
  top: 15px;
}
/deep/.el-dialog-body {
  padding: 10px;
}
.dialog-inherit {
  display: flex;
  flex-direction: row;
  margin: 10px;
  justify-content:right;
}
</style>
